<template>
  <!--  <div v-drag>-->
  <el-dialog
    ref="dialog"
    v-model="layerDialog.show"
    :title="layerDialog.title"
    :width="layerDialog.width"
    center
    draggable
  >
    <slot></slot>
    <template #footer v-if="layerDialog.showButton">
      <div class="">
        <el-button class="marginR20" @click="close">{{
          $t("key17")
        }}</el-button>
        <el-button type="primary" @click="confirm">{{
          $t("key1035")
        }}</el-button>
      </div>
    </template>
  </el-dialog>
  <!--  </div>-->
</template>

<script>
import { defineComponent, ref, watch, computed } from "vue";
import drag from "@/directive/drag/index";

export default defineComponent({
  props: {
    layer: {
      type: Object,
      default: () => ({
        show: false,
        title: "",
        width: 600,
        showButton: false
      }),
      required: true
    }
  },
  directives: {
    drag
  },
  setup(props, ctx) {
    const layerDialog = computed(() =>
      props.layer.show
        ? props.layer
        : {
            show: false,
            title: "",
            width: 600,
            showButton: false
          }
    );
    const dialog = ref(null);

    function confirm() {
      ctx.emit("confirm");
    }

    function close() {
      // dialog.value.close();
      layerDialog.value.show = false;
    }

    return {
      layerDialog,
      dialog,
      confirm,
      close
    };
  }
});
</script>

<style lang="less" scoped></style>
